"use client";

import { useState } from "react";
import { usePathname } from "next/navigation";
import Link from "next/link";
import { useSession } from "next-auth/react";
import { redirect } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  Menu,
  Users,
  ShoppingCart,
  Package,
  Tag,
  MessageSquare,
  BarChart,
  Settings,
  LogOut,
  Bell,
  AlertTriangle,
} from "lucide-react";

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { data: session, status } = useSession();
  const pathname = usePathname();
  const [open, setOpen] = useState(false);

  // 检查用户是否已认证
  if (status === "unauthenticated") {
    redirect("/login");
  }

  // 导航项
  const navItems = [
    {
      name: "仪表盘",
      href: "/dashboard",
      icon: <BarChart className="h-5 w-5" />,
    },
    {
      name: "用户管理",
      href: "/dashboard/users",
      icon: <Users className="h-5 w-5" />,
    },
    {
      name: "商品管理",
      href: "/dashboard/commodities",
      icon: <ShoppingCart className="h-5 w-5" />,
    },
    {
      name: "订单管理",
      href: "/dashboard/orders",
      icon: <Package className="h-5 w-5" />,
    },
    {
      name: "帖子管理",
      href: "/dashboard/posts",
      icon: <MessageSquare className="h-5 w-5" />,
    },
    {
      name: "分类管理",
      href: "/dashboard/categories",
      icon: <Tag className="h-5 w-5" />,
    },
    {
      name: "公告管理",
      href: "/dashboard/notices",
      icon: <Bell className="h-5 w-5" />,
    },
    {
      name: "轮播图管理",
      href: "/dashboard/carousels",
      icon: <Tag className="h-5 w-5" />,
    },
    {
      name: "敏感词管理",
      href: "/dashboard/illegal-words",
      icon: <AlertTriangle className="h-5 w-5" />,
    },
    {
      name: "反馈管理",
      href: "/dashboard/feedbacks",
      icon: <MessageSquare className="h-5 w-5" />,
    },
    {
      name: "系统设置",
      href: "/dashboard/settings",
      icon: <Settings className="h-5 w-5" />,
    },
  ];

  if (status === "loading") {
    return (
      <div className="flex items-center justify-center min-h-screen">
        加载中...
      </div>
    );
  }

  return (
    <div className="flex min-h-screen bg-zinc-50">
      {/* 桌面侧边栏 */}
      <aside className="hidden md:flex flex-col w-64 bg-white border-r border-zinc-200">
        <div className="p-4 border-b border-zinc-200">
          <h1 className="text-xl font-bold">后台管理系统</h1>
        </div>
        <nav className="flex-1 p-4 space-y-1">
          {navItems.map((item) => {
            const isActive =
              pathname === item.href || pathname.startsWith(`${item.href}/`);
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`flex items-center px-3 py-2 rounded-md ${
                  isActive
                    ? "bg-zinc-100 text-zinc-900"
                    : "text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900"
                }`}
              >
                {item.icon}
                <span className="ml-3">{item.name}</span>
              </Link>
            );
          })}
        </nav>
        <div className="p-4 border-t border-zinc-200">
          <Link
            href="/api/auth/signout"
            className="flex items-center text-zinc-600 hover:text-zinc-900"
          >
            <LogOut className="h-5 w-5" />
            <span className="ml-3">退出登录</span>
          </Link>
        </div>
      </aside>

      {/* 移动端侧边栏 */}
      <Sheet open={open} onOpenChange={setOpen}>
        <SheetTrigger asChild className="md:hidden">
          <Button variant="ghost" size="icon" className="absolute top-4 left-4">
            <Menu className="h-6 w-6" />
          </Button>
        </SheetTrigger>
        <SheetContent side="left" className="w-64 p-0">
          <div className="p-4 border-b border-zinc-200">
            <h1 className="text-xl font-bold">后台管理系统</h1>
          </div>
          <nav className="flex-1 p-4 space-y-1">
            {navItems.map((item) => {
              const isActive =
                pathname === item.href || pathname.startsWith(`${item.href}/`);
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  onClick={() => setOpen(false)}
                  className={`flex items-center px-3 py-2 rounded-md ${
                    isActive
                      ? "bg-zinc-100 text-zinc-900"
                      : "text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900"
                  }`}
                >
                  {item.icon}
                  <span className="ml-3">{item.name}</span>
                </Link>
              );
            })}
          </nav>
          <div className="p-4 border-t border-zinc-200">
            <Link
              href="/api/auth/signout"
              className="flex items-center text-zinc-600 hover:text-zinc-900"
            >
              <LogOut className="h-5 w-5" />
              <span className="ml-3">退出登录</span>
            </Link>
          </div>
        </SheetContent>
      </Sheet>

      {/* 主内容区 */}
      <div className="flex-1 flex flex-col">
        {/* 顶部导航栏 */}
        <header className="h-16 bg-white border-b border-zinc-200 flex items-center justify-end px-4 md:px-6">
          <div className="flex items-center space-x-4">
            <span className="text-sm font-medium">
              {session?.user?.name || "管理员"}
            </span>
            <Avatar>
              <AvatarImage src="/avatar.png" alt="用户头像" />
              <AvatarFallback>管理</AvatarFallback>
            </Avatar>
          </div>
        </header>

        {/* 页面内容 */}
        <main className="flex-1 p-4 md:p-6 overflow-auto">{children}</main>
      </div>
    </div>
  );
}
